// button
.btn(@w:200.05rem,@h:60.1rem,@c:#fff, @br:10.05rem,@bg:#fd7418,@b:none) {
  color: @c;
  width: @w;
  height: @h;
  line-height: @h;
  text-align: center;
  border-radius: @br;
  background-color: @bg;
  border: @b;
}

// width height
.wh(@w,@h) {
  width: @w;
  height: @h;
}
.wh(@a) {
  width: @a;
  height: @a;
}

// padding
.pd(@t,@r,@b,@l) {
  padding: @arguments;
}
.pd(@tb,@lr) {
  padding: @tb @lr;
}
.pd(@a) {
  padding: @a;
}
.pdt(@a) {
  padding-top: @a;
}
.pdl(@a) {
  padding-left: @a;
}
.pdb(@a) {
  padding-bottom: @a;
}
.pdr(@a) {
  padding-right: @a;
}

// margin
.mg(@t,@r,@b,@l) {
  margin: @arguments;
}
.mg(@tb,@lr) {
  margin: @tb @lr;
}
.mg(@a) {
  margin: @a;
}
.mgt(@a) {
  margin-top: @a;
}
.mgr(@a) {
  margin-right: @a;
}
.mgb(@a) {
  margin-bottom: @a;
}
.mgl(@a) {
  margin-left: @a;
}

// border
.bdt(@a:1px,@b:solid,@c:#eee) {
  border-top: @arguments;
}
.bdb(@a:1px,@b:solid,@c:#eee) {
  border-bottom: @arguments;
}

// flex
.flex(@fd:row,@jc:center,@ai:center) {
  display: flex;
  flex-direction: @fd;
  justify-content: @jc;
  align-items: @ai;
}

// font
.ft(@fz,@c:#333) {
  font-size: @fz;
  color: @c;
}

// text hide
.txt_hide() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// X
.close(@w,@h,@color) {
  position: relative;
  display: inline-block;
  width: @w;
  height: @h;
  overflow: hidden;
  transform: rotate(45deg);
  &:before {
    width: 200%;
    left: -50%;
    transform: rotate(90deg);
    content: '';
    position: absolute;
    height: 0.13rem;
    top: 50%;
    margin-top: -1px;
    background: @color;
  }
  &:after {
    width: 200%;
    left: -50%;
    content: '';
    position: absolute;
    height: 0.13rem;
    top: 50%;
    margin-top: -1px;
    background: @color;
  }
}
